<div class="loading-container"><div class="loader"></div></div>

<div class="loading-waiter">
	<div class="loader">
		<div class="texting">请稍后...</div>
		<div class="spinner">
		  <div class="rect1"></div>
		  <div class="rect2"></div>
		  <div class="rect3"></div>
		  <div class="rect4"></div>
		  <div class="rect5"></div>
		</div>
	</div>
</div>

<div class="wrapper wrapper-shadow wrapper-list"> 
	<!-- list data wrapper -->
	<div class="result-wrapper no-padding">
   	<div class="result-body">
   		<div class="tabs">
      	<ul class="nav nav-tabs widget no-margin-bottom">
        	<li class="active"> 
         		<a href="#tab-content" data-toggle="tab" onclick="handlerToggle('早教')" data-type="早教"> 
         			<span class="menu-icon"><i class="fa fa-user-plus"></i></span> 早教学员
           	</a>
         	</li>
          <li> 
         		<a href="#tab-content" data-toggle="tab" onclick="handlerToggle('托班')" data-type="托班"> 
           		<span class="menu-icon"><i class="fa fa-user-plus"></i></span> 托班学员
           	</a>
          </li>
         	<li> 
           	<a href="#tab-content" data-toggle="tab" onclick="handlerToggle('pause')"> 
           		<span class="menu-icon"><i class="fa fa-user-plus"></i></span> 停课学员
         		</a>
        	</li>
        </ul>
        <div class="tab-content no-border xs-padding">
					<div class="tab-pane active" id="tab-content">
           	<div id="toolbar" class="btn-group">
					    <button type="button" class="btn btn-success" onclick="handlerChange();">
			        	<i class="glyphicon glyphicon-random"></i> 分班(转班)
					    </button>
						</div>
           	<table data-ajax="handlerSearch" 
       					 	 data-method="post" 
       					 	 data-search="true" 
       					 	 data-toolbar="#toolbar" 
       					 	 data-id-field="id" 
       					 	 data-unique-id="id" 
       					 	 data-pagination="true" 
       					 	 data-show-toggle="true" 
       					 	 data-show-refresh="true" 
       					 	 data-show-columns="true" 
       					 	 data-check-on-init="true" 
       					 	 data-click-to-select="true" 
       					 	 data-side-pagination="server" 
       					 	 data-mobile-responsive="true" 
           				 data-event-onload="handlerSuccess" 
       					 	 data-form-search="#search-form-contract" id="table-contract" class="bootstrap-table">
							<thead>
								<tr>
									<th data-checkbox="true"></th>
									<th data-field="id" 					data-visible="false" data-switchable="false">ID</th>
									<th data-field="username" 		data-align="center" data-sortable="true">顾问</th>
									<th data-field="student" 			data-align="center" >会员</th>
									<th data-field="nickname" 		data-align="center" >昵称</th>
									<th data-field="birthday" 		data-align="center" >生日</th>
									<th data-field="moonage" 			data-align="center" data-sortable="true">月龄</th>
									<th data-field="parent" 			data-align="center" data-visible="false">家长</th>
									<th data-field="mobile" 			data-align="center" data-visible="false">手机</th>
									<th data-field="fromDate" 		data-align="center" data-sortable="true">起始时间</th>
									<th data-field="totals" 			data-align="center" data-sortable="true">总课时数</th>
									<th data-field="useing" 			data-align="center" data-sortable="true">已耗课时</th>
									<th data-field="rested" 			data-align="center" data-sortable="true">剩余课时</th>
									<th data-field="totalsPrice" 	data-align="center" data-visible="false">总金额</th>
									<th data-field="useingPrice" 	data-align="center" data-visible="false">消费金额</th>
									<th data-field="restedPrice" 	data-align="center" data-visible="false">剩余金额</th>
									<th data-field="classes" 			data-align="center" data-width="60" data-formatter="renderClasses">所在班级</th>
									<th data-field="operator" 		data-align="center" data-width="75" data-formatter="renderOperator" data-table-target="contract">操作</th>
								</tr>
							</thead>
						</table>
        	</div>
      	</div>
    	</div>
   	</div>
	</div>

	<!-- form editor wrapper -->
	<div class="editor-wrapper">
		
	</div>
</div>
<!-- PAGE CONTENT END =============================================== -->

<!-- PAGE MODAL START =============================================== -->
<div class="modal fade" id="callon-modal" tabindex="-1" role="dialog" aria-labelledby="callon-modal-label" data-backdrop="static">
  <div class="modal-dialog modal-fill" role="document">
    <div class="modal-content">
      
    </div>
  </div>
</div>
<!-- PAGE MODAL END ================================================= -->

<!-- 查询表单 ========================================================= -->
<form id="search-form-contract" action="/miwawa/{dbname}/common/search.json" method="post" 
			name="com.app.miwawa.api.esm.entity.view.ContractView">
			<input type="hidden" name="item" value="早教" data-search-group="and" data-search-operation="EQ">
			<input type="hidden" name="status" value="0" data-search-group="and" data-search-operation="EQ">
			<input type="hidden" name="invalid" value="F" data-search-group="and" data-search-operation="EQ">
			<input type="hidden" data-search-sort="createDate" data-search-order="desc">
</form>
<form id="search-form-classes" action="/miwawa/{dbname}/common/search.json" method="post" 
			name="com.app.miwawa.api.eam.entity.view.StudentClasses">
			<input type="hidden" name="type" value="0" data-search-group="and" data-search-operation="EQ">
			<input type="hidden" name="invalid" value="F" data-search-group="and" data-search-operation="EQ">
			<input type="hidden" name="studentid" value="0" data-search-group="and" data-search-operation="EQ">
			<input type="hidden" data-search-sort="createDate" data-search-order="desc">
</form>
<!-- 删除表单 ========================================================= -->
<form id="remove-form-callon" action="/miwawa/{dbname}/common/remove" method="post" name="com.app.miwawa.api.eam.entity.StudentCallon"></form>

<!-- Javascript ===================================================== -->
<script src="/miwawa/resources/lib/miwawa/1.0.2/js/core/requirejs/require.js"></script>

<script type="text/javascript">
<!--
	var $moment;
	
	jQuery(function(){
		require(['/miwawa/resources/lib/miwawa/1.0.2/js/core/module/app/simple.js','moment'], function(simple,moment){
			$moment = moment;
			simple(['registerForm','registerTable','registerWidget']);
		});
	});
	
	// 列表切换
	function handlerToggle(value){
		// 设置查询参数
		if(value == "pause"){
			jQuery(":hidden[name='item']","#search-form-contract").data("ignore",true);
			jQuery(":hidden[name='status']","#search-form-contract").val(value);
			jQuery("#toolbar").hide();
		}else if(value == "早教"){
			jQuery(":hidden[name='item']","#search-form-contract").val(value).data("ignore",false);
			jQuery(":hidden[name='status']","#search-form-contract").val("0");
			jQuery("#toolbar").show();
		}	else{
			jQuery(":hidden[name='item']","#search-form-contract").val(value).data("ignore",false);
			jQuery(":hidden[name='status']","#search-form-contract").val("0");
			jQuery(":hidden[name='rested']","#search-form-contract").remove();
			jQuery("#search-form-contract").append("<input type='hidden' name='overDate' value='"+$moment().format("YYYY-MM-DD")+"' data-search-group='and' data-search-operation='GE' data-search-type='DATES'>");
			jQuery("#toolbar").show();
		} 
		
		// 设置列表
		jQuery("#table-contract").bootstrapTable('refreshOptions', {"searchText":null, "columns":columns[value]});
		
		// 刷新列表
		jQuery("#table-contract").bootstrapTable('refresh');
	}
	
	// 查看已分配班级
	function handlerClasses(studentid){
		// 显示模态窗口
		jQuery("#extension-modal").data("url","content/eam/student/dialog/classes.html").data("onshow",function(){
			jQuery(":hidden[name='type']","#search-form-classes").val(jQuery(".nav-tabs li.active > a").data("type"));
			jQuery(":hidden[name='studentid']","#search-form-classes").val(studentid);
			
			if(!jQuery("#table-classes-ready").hasClass("table")){
				jQuery("#table-classes-ready").bootstrapTable();
			}else{
				jQuery("#table-classes-ready").bootstrapTable("refresh");
			}
		}).data("onhidden",function(){
			jQuery("#table-contract").bootstrapTable("refresh");
		}).modal("show");
	}
	
	// 分班 & 调班
	function handlerChange() {
		var contracts = jQuery("#table-contract").bootstrapTable("getSelections");
		if(contracts.length <= 0){
			jQuery.message.alert("请选择要分班或调班的学员！");				
		}else{
			jQuery("#table-contract").data("selectedRow", contracts);
			
			require(['text!/miwawa/content/eam/student/editor/divide.html?'+Date.parse(new Date())], function(html){
				jQuery(".editor-wrapper").html(html).parent().addClass("editor-wrapper-open");
			});
		}
	}
	
	// 签到历史
	function handlerHistory(trigger, rowid){
		var contract = jQuery("#table-contract").bootstrapTable("getRowByUniqueId",rowid);
		jQuery.utils.loading("正在准备签到历史数据，请稍后...", "show");
		jQuery.ajaxsend({
			url:"/miwawa/{dbname}/common/search.json".replace("{dbname}",dbname),
			data:{
				"entityClass":"com.app.miwawa.api.eam.entity.view.StudentClasses",
				"offset":0,
				"limit":0,
				"and":[
					{"operator":"EQ", "fieldName":"type", "fieldValue":contract.item},
					{"operator":"EQ", "fieldName":"status", "fieldValue":"0"},
					{"operator":"EQ", "fieldName":"invalid", "fieldValue":"F"},
					{"operator":"EQ", "fieldName":"studentid", "fieldValue":contract.studentid},
				]
			},
			success:function(data){
				if(data && data.rows){
					if(data.rows.length > 0){
						jQuery("#extension-modal").removeClass("modal-middle").data("url","content/eam/student/dialog/history.html").data("onshow",function(){
							createClasses(data.rows);
						}).data("onshown",function(){
							jQuery("button.classes:eq(0)").click();
						}).data("onhidden",function(){
							jQuery("#calendar").fullCalendar("destroy");
							jQuery("#calendar").empty();
							jQuery("#table-contract").bootstrapTable("refresh");
						}).modal("show");
					}else{
						jQuery.message.alert("该学员还未分班，暂无签到记录！");
					}
				}
				jQuery.utils.loading(null, "hide");
			}
		});
	}
	
	// 渲染学员列表班级列
	function renderClasses(value, row, index){
		return '<a href="javascript:void(0);" onclick="handlerClasses(\''+row.studentid+'\')"><span class="badge bg-orange">'+value+'</span></a>';
	}
	
	// 渲染学员列表操作列
	function renderOperator(value, row, index){
		var operator = "";
		switch(this.tableTarget){
			case "contract":
				operator = "<a class='btn btn-info 		btn-xs btn-table-op' onclick='handlerCreate(this, \""+row.id+"\")' 	data-toggle='tooltip' data-placement='top' title='电访' data-table-source='#table-contract' data-editor-path='/miwawa/content/eam/student/editor' data-editor-page='callon.html'> <i class='icon-call-out'></i> </a>"
							 	 + "<a class='btn btn-warning btn-xs btn-table-op' onclick='handlerHistory(this, \""+row.id+"\")' data-toggle='tooltip' data-placement='left' title='签到历史'> <i class='ion-clock'></i> </a>";
			break;
			case "callon":
				operator = "<a class='btn btn-danger 	btn-xs btn-table-op' onclick='handlerRemove(this,\""+row.id+"\")' data-table-source='#table-callon' data-form-source='#remove-form-callon' data-toggle='tooltip' data-placement='top' title='删除'> <i class='fa fa-trash'></i> </a>";
			break;
		}
		return operator;
	}
	
	// 创建签到历史的班级按钮组
	function createClasses(rows){
		jQuery("#classes-group").empty();
		jQuery.each(rows,function(index,row){
			jQuery("#classes-group").append('<button class="btn btn-default classes" id="'+row.studentid+'" onclick="loaderClasses(this, \''+row.type+'\');">'+row.classes+'</button>');
		});
	}
	
	// 列表字段定义
	var columns = {
		"早教":[
			{ checkbox: true }, 
			{ field: 'id', 					title: 'ID',	visible: false, switchable:false }, 
			{ field: 'username', 		title: '顾问' },
			{ field: 'student', 		title: '会员' },
			{ field: 'nickname', 		title: '昵称' },
			{ field: 'birthday', 		title: '生日' },
			{ field: 'moonage', 		title: '月龄' },
			{ field: 'parent', 			title: '家长',	visible: false },
			{ field: 'mobile', 			title: '手机',	visible: false },
			{ field: 'fromDate', 			title: '购买课时' },
			{ field: 'totals', 			title: '总课时数' },
			{ field: 'useing', 			title: '已耗课时' },
			{ field: 'rested', 			title: '剩余课时' },
			{ field: 'totalsPrice', title: '总金额', 		visible: false },
			{ field: 'useingPrice', title: '剩余金额',	visible: false },
			{ field: 'restedPrice', title: '剩余金额',	visible: false },
			{ field: 'classes', 		title: '所在班级' },
			{ field: 'operator', 		title: '操作' }		
		],
		"托班":[
			{ checkbox: true }, 
			{ field: 'id', 					title: 'ID',	visible: false, switchable:false }, 
			{ field: 'username', 		title: '顾问' },
			{ field: 'student', 		title: '会员' },
			{ field: 'nickname', 		title: '昵称' },
			{ field: 'birthday', 		title: '生日' },
			{ field: 'moonage', 		title: '月龄' },
			{ field: 'parent', 			title: '家长',	visible: false },
			{ field: 'mobile', 			title: '手机',	visible: false },
			{ field: 'totals', 			title: '总月数' },
			{ field: 'buying', 			title: '购买月数' },
			{ field: 'fromDate', 		title: '起始日期' },
			{ field: 'overDate', 		title: '截止日期' },
			{ field: 'totalsPrice', title: '总金额', 		visible: false },
			{ field: 'useingPrice', title: '剩余金额',	visible: false },
			{ field: 'restedPrice', title: '剩余金额',	visible: false },
			{ field: 'classes', 		title: '所在班级' },
			{ field: 'operator', 		title: '操作' }	
		],
		"pause":[
			{ checkbox: true }, 
			{ field: 'id', 					title: 'ID',	visible: false, switchable:false }, 
			{ field: 'username', 		title: '顾问' },
			{ field: 'student', 		title: '会员' },
			{ field: 'nickname', 		title: '昵称' },
			{ field: 'birthday', 		title: '生日' },
			{ field: 'moonage', 		title: '月龄' },
			{ field: 'parent', 			title: '家长',	visible: false },
			{ field: 'mobile', 			title: '手机',	visible: false },
			{ field: 'fromDate', 		title: '起始时间' },
			{ field: 'totals', 			title: '总课时数' },
			{ field: 'useing', 			title: '已耗课时' },
			{ field: 'rested', 			title: '剩余课时' },
			{ field: 'totalsPrice', title: '总金额', 		visible: false },
			{ field: 'useingPrice', title: '剩余金额',	visible: false },
			{ field: 'restedPrice', title: '剩余金额',	visible: false },
			{ field: 'classes', 		title: '所在班级' },
			{ field: 'operator', 		title: '操作' }	
		]
	};
//-->
</script>
